<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="app">
	<header class="mui-bar mui-bar-nav in-bar">    
		<a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a href="index.htm" class="mui-icon mui-icon-home mui-pull-left"></a>
		<h1 class="mui-title">详细内容</h1>
	</header> 

	<nav class="mui-bar mui-bar-tab" id="bmenus">
		<div class="mui-inline" style="width:60%;">
			<div class="input" id="pinlunBtn" style='text-align: center;color: #AFAFAF;font-size: 12px;'>写评论...</div>
		</div>
		
		<div class="mui-inline" style="width:40%;">
		    <a v-on:tap="pinglun" class="mui-tab-item">
		        <span class="icon mui-icon icon-liaotian">
		        	<span class="mui-badge" v-if="info.comments > 0">{{info.comments}}</span>
		        </span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="icon mui-icon icon-xin"></span>
		    </a>
		    <a class="mui-tab-item" v-on:tap="share">
		        <span class="icon mui-icon icon-fenxiang"></span>
		    </a>
	   	</div>
	</nav>

	<div id="writeBox" class="mui-popover mui-popover-action mui-popover-bottom"  style="background: #F2F2F2;">
		<div class="mui-content-padded">
			<textarea type="text" class="mui-pull-left" v-model="content" style="width:100%;height: 100px;font-size: 14px;border-radius: 10px;" placeholder="点评..."></textarea>
			<a class="mui-btn mui-pull-right" :class="{'mui-btn-blue':canSub}" style="margin-bottom: 15px;" v-on:tap="submit">发送</a>
		</div>
	</div>

	<div id="shareBox" class="mui-popover mui-popover-action mui-popover-bottom"  style="background: #F2F2F2;">
		<div class="bdsharebuttonbox">
			<ul class="gb_resItms">
				<li><a href="#" data-cmd="weixin" class="bds_weixin" style="background-position:center;"></a><span>微信好友</span></li>
				<li><a href="#" data-cmd="sqq" class="bds_tqq" style="background-position:center;"></a><span>QQ好友</span></li>
				<li><a href="#" data-cmd="qzone" class="bds_qzone" style="background-position:center;"></a><span>QQ空间</span></li>
				<li><a href="#" class="bds_tsina" data-cmd="tsina" style="background-position:center;"></a><span>新浪微博</span></li>	
			</ul>
		</div>
	</div>

	<div class="mui-content bg-white">
		<iframe :src="url" frameborder="0" scrolling="auto" id="myframe" style="width:100%"></iframe>
	</div>
</div>

<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/loading.js"></script>
<script src="js/app.js"></script>

<script type="text/javascript">
//全局变量，动态的文章ID
var ShareURL = "";
//绑定所有分享按钮所在A标签的鼠标移入事件，从而获取动态ID
$(function () {
	$(".bdsharebuttonbox a").mouseover(function () {
		ShareURL = $(this).attr("data-url");
	});
});

/* 
* 动态设置百度分享URL的函数,具体参数
* cmd为分享目标id,此id指的是插件中分析按钮的ID
*，我们自己的文章ID要通过全局变量获取
* config为当前设置，返回值为更新后的设置。
*/
function SetShareUrl(cmd, config) {            
	if (ShareURL) {
		config.bdUrl = ShareURL;    
	}
	return config;
}

//插件的配置部分，注意要记得设置onBeforeClick事件，主要用于获取动态的文章ID
window._bd_share_config = {
	"common": {
		onBeforeClick: SetShareUrl, "bdSnsKey": {}, "bdText": ""
		, "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "24"
	}, "share": {}
};
//插件的JS加载部分
with (document) 0[(getElementsByTagName('head')[0] || body)
	.appendChild(createElement('script'))
	.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='
	+ ~(-new Date() / 36e5)];
</script> 
<!--效果html结束-->

<script type="text/javascript" charset="utf-8">	
app.init();
if(request.id=='' || request.id==undefined){
	alert("参数错误");	
	window.history.go(-1);
}

mui.init();
mui.ready(function(){
	//评论菜单
 	mui("#bmenus").on("tap","#pinlunBtn",function () {
 		mui("#writeBox").popover("toggle");
 		$("#writeBox #pinlunTXT").focus();
 	}); 
})

var vm = new Vue({
	el:"#app",
	data:{
		canSub:false,
		content : "",
		id:request.id,
		info:{},
		url:"http://wap.chinajci.com/sms/ndetail.aspx?info_no="+request.id+"&isWAP=YES"
	},
	watch:{
        content(val){//普通的watch监听
        	if (val!=''){
        		this.canSub=true;
        	}else{
        		this.canSub=false;
        	}
        }
    },
	created : function(){		
		this.changeFrameHeight();
		that = this;
		mui.showLoading('数据加载中');
		request = {
			command:8,
			udid:uuid,
			id:this.id			
		};
		mui.get(api,request,function(res){//关注列表			
			mui.hideLoading();
			that.info = res.body;			
		},'json');
	},
	methods: {
		share:function(){
 			mui("#shareBox").popover("toggle");
		},
		pinglun : function(){
			window.location.href = 'pinglun.htm?id='+this.id;
		},
		submit:function(){
			if (this.content!=''){
				url = api+'?command=7&user='+uuid+'&id='+request.id;
				mui.ajax(url,{ 
	                    data: this.content, 
	                    dataType: 'json', 
	                    type: 'post',                
	                    success: function(res){
	                    	mui.alert('提交成功',function(){
	                    		window.location.href = 'pinglun.htm?id='+request.id;
	                    	})	                    	
	                    }
	            });
			}
		},
		changeFrameHeight : function(){
			var ifm= document.getElementById("myframe"); 
    		ifm.height=document.documentElement.clientHeight;
		}
	},
	updated : function(){
		
	}
});

</script>

</body>
</html>